<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;padding:20px;border:solid 30px black;margin: 40px;overflow: auto;}
    </style>
</head>
<body>
    <h3>这是标题</h3>
    <div class="box">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
</body>
<script>
    
    var obox = document.getElementsByClassName("box")[0];

    // 只能获取不能设置

    // cont+padding+border
    console.log(obox.offsetWidth, obox.offsetHeight);

    // cont+padding
    console.log(obox.clientWidth, obox.clientHeight);

    // cont
    console.log( parseInt(getComputedStyle(obox).width) );

    // cont + padding + 溢出的内容尺寸
    console.log( obox.scrollWidth, obox.scrollHeight);

    // js中位置只有左、上，没有右、下
    // 相对于“包含块”偏移的位置
    console.log(obox.offsetLeft, obox.offsetTop);
    // 包含块

    // ============

    document.onclick = function(){
        // 滚走了的距离
        // 即可获取，又可设置
        // console.log( obox.scrollTop, obox.scrollLeft );
        obox.scrollTop = 666;
    }

    

</script>
</html>